<!--
  管理员主界面
  创建时间：2025-09-11
  作者：开发团队
  目的：内网管理员功能总览和操作入口
-->

<template>
  <CommonLayout>
    <template #sidebar>
      <AdminSidebar :active-menu="activeTab" @menu-select="setActiveTab" />
    </template>
    
    <div class="admin-dashboard">
      <component :is="currentComponent" />
    </div>
  </CommonLayout>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import CommonLayout from '@/components/common/CommonLayout.vue'
import AdminSidebar from '@/components/admin/AdminSidebar.vue'
import KeyManagement from '@/components/admin/KeyManagement.vue'
import SpecialVisitors from '@/components/admin/SpecialVisitors.vue'
import GuardManagement from '@/components/admin/GuardManagement.vue'
// 导入统计分析组件
import Statistics from '@/components/admin/Statistics.vue'
// 导入审计日志组件
import AuditLogs from '@/components/admin/AuditLogs.vue'

// 当前激活的标签页
const activeTab = ref('statistics')

// 组件映射
const componentMap: Record<string, any> = {
  statistics: Statistics,
  keys: KeyManagement,
  visitors: SpecialVisitors,
  guards: GuardManagement,
  audit: AuditLogs
}

// 当前显示的组件
const currentComponent = computed(() => {
  return componentMap[activeTab.value] || Statistics
})

/**
 * 设置激活的标签页
 * :param tab: 标签页标识
 */
const setActiveTab = (tab: string): void => {
  activeTab.value = tab
}
</script>

<style scoped>
.admin-dashboard {
  height: 100%;
}
</style>